<template>
  <div>
    <p class="hep">
      <span @click="fanhui()">&lt;</span>
      <span>···</span>
    </p>
    <header>
      <div class="hebox">
        <div class="heleft">
          <img src="bk2_03.jpg" alt />
        </div>
        <div class="heright">
          <p class="herp1">武魂巅峰</p>
          <p class="herp2">墨幻|玄幻|完结</p>
          <p>
            <span>9.9</span>分
            <span>16.3万</span>人气
          </p>
          <p>
            <span>2094.2万</span>字数
          </p>
        </div>
      </div>
    </header>
    <div class="neirong">
      <div class="leixing">
        <p>炼丹</p>
        <p>无敌</p>
        <p>爽文</p>
      </div>
      <div>
        <p>人物：杨开</p>
        <br />
        <p>武之电魂，是孤独，是寂寞，死漫漫求索，是高出不胜寒逆境中成长，绝地李秋生，不屈不挠，才能看破无极道。凌霄阁试炼底子兼扫地小厮杨开偶或一本无字书，从此踏上慢慢武道</p>
      </div>
    </div>
    <div class="mulu">
      <p>目录</p>
      <p>2021-11-14更新</p>
      <p>完结至：6065章</p>
    </div>
    <div class="xieguo">
      <p class="taxieguo">Ta还写过</p>
      <div class="xgnei">
        <div class="xgxr">
          <div class="xgleft">
            <img src alt />
          </div>
          <div class="xgright">
            <p>唐门高手在...</p>
            <p class="xgp2">脉脉</p>
            <p class="xgp3">9.2分</p>
          </div>
        </div>
        <div class="xgxr">
          <div class="xgleft">
            <img src alt />
          </div>
          <div class="xgright">
            <p>唐门高手在...</p>
            <p class="xgp2">脉脉</p>
            <p class="xgp3">9.2分</p>
          </div>
        </div>
        <div class="xgxr">
          <div class="xgleft">
            <img src alt />
          </div>
          <div class="xgright">
            <p>唐门高手在...</p>
            <p class="xgp2">脉脉</p>
            <p class="xgp3">9.2分</p>
          </div>
        </div>
        <div class="xgxr">
          <div class="xgleft">
            <img src alt />
          </div>
          <div class="xgright">
            <p>唐门高手在...</p>
            <p class="xgp2">脉脉</p>
            <p class="xgp3">9.2分</p>
          </div>
        </div>
        <div class="xgxr">
          <div class="xgleft">
            <img src alt />
          </div>
          <div class="xgright">
            <p>唐门高手在...</p>
            <p class="xgp2">脉脉</p>
            <p class="xgp3">9.2分</p>
          </div>
        </div>
        <div class="xgxr">
          <div class="xgleft">
            <img src alt />
          </div>
          <div class="xgright">
            <p>唐门高手在...</p>
            <p class="xgp2">脉脉</p>
            <p class="xgp3">9.2分</p>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <p class="fop1">
        <span>大家都在看</span>
        <span>换一换</span>
      </p>
    </footer>
    <p class="di">
      <button>收藏</button>
      <button class="yuedu">免费阅读</button>
      <button>免费下载</button>
    </p>
  </div>
</template>

<script>
export default {
  methods:{
    fanhui(){
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
header {
  background: #504239;
  height: 2.21rem;
  box-sizing: border-box;
  padding: 0 0.2rem;
  border-radius: 0 0 0.2rem 0.2rem;
  margin-top: .5rem;
}
.hep {
  width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  background: #504239;
}
.hep span {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  color: white;
  font-size: 0.3rem;
}
header .hebox {
  display: flex;
  height: 1.65rem;
  justify-content: space-between;
  align-items: flex-end;
}
header .hebox .heleft img {
  width: 1.15rem;
  height: 1.5rem;
}
header .hebox .heright {
  height: 1.5rem;
  width: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
header .hebox .heright p {
  color: white;
}
header .hebox .heright .herp1 {
  font-weight: 600;
  font-size: 0.18rem;
}
header .hebox .heright .herp2 {
  color: #9c8e85;
  font-size: 0.12rem;
}
.neirong {
  color: #9a9a9a;
  font-size: 0.14rem;
  height: 2.15rem;
  box-sizing: border-box;
  padding: 0 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-bottom: 1px solid #ececec;
}
.neirong .leixing {
  display: flex;
}
.neirong .leixing p {
  width: 0.33rem;
  height: 0.22rem;
  text-align: center;
  line-height: 0.22rem;
  border-radius: 0.22rem;
  background: #f3f3f3;
}
.mulu {
  height: 0.6rem;
  display: flex;
  box-sizing: border-box;
  padding: 0 0.2rem;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
}
.mulu p {
  line-height: 0.6rem;
}
.mulu p:nth-child(1) {
  font-weight: 600;
}
.mulu p:nth-child(2) {
  font-size: 0.12rem;
  color: #d89d61;
}
.mulu p:nth-child(3) {
  color: #b7b7b7;
  font-size: 0.12rem;
}
.xieguo {
  min-height: 0.6rem;
  box-sizing: border-box;
  padding: 0 0.2rem;
  border-bottom: 1px solid #ececec;
}
.xieguo .taxieguo {
  font-weight: 600;
  height: 0.6rem;
  line-height: 0.6rem;
}
.xieguo .xgnei {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.xieguo .xgnei .xgxr {
  width: 1.54rem;
  height: 0.68rem;
  display: flex;
  margin-bottom: 0.2rem;
}
/* .xieguo .xgnei .xgxr .xgright p{
    height: 100%;
  } */
.xieguo .xgright {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.xieguo img {
  height: 0.68rem;
  width: 0.51rem;
}
.xieguo .xgp2 {
  color: #959595;
}
.xieguo .xgp3 {
  color: #ccbd55;
}
footer {
  box-sizing: border-box;
  padding: 0 0.2rem;
  margin-bottom: 0.5rem;
}
footer .fop1 {
  font-weight: 600;
  height: 0.6rem;
  line-height: 0.6rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.di {
  height: 0.5rem;
  color: #44bb3d;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.2rem;
  position: fixed;
  bottom: 0;
  background: white;
}
.di button {
  height: 0.35rem;
  border-radius: 0.35rem;
  border: none;
  background: none;
}
.di .yuedu {
  width: 1.32rem;

  background: #44bb3d;
  color: white;
}
</style>